<div class="form">
<?php
    $cs=Yii::app()->clientScript;
    $cs->registerScriptFile(Yii::app()->request->baseUrl."/js/jquery_ui/jquery-ui-1.8.6.custom.min.js", CClientScript::POS_HEAD);
    $cs->registerCssFile(Yii::app()->request->baseUrl."/js/jquery_ui/jquery.ui.theme.css");
    $cs->registerCssFile(Yii::app()->request->baseUrl."/js/jquery_ui/jquery.ui.core.css");
    $cs->registerCssFile(Yii::app()->request->baseUrl."/js/jquery_ui/jquery.ui.datepicker.css");
    $cs->registerScriptFile(Yii::app()->request->baseUrl."/js/jquery_ui/jquery.ui.core.min.js", CClientScript::POS_END);
    $cs->registerScriptFile(Yii::app()->request->baseUrl."/js/jquery_ui/jquery.ui.datepicker.min.js", CClientScript::POS_END);
    //if(Yii::app()->language == "vi_vn") $cs->registerScriptFile(Yii::app()->request->baseUrl."/js/jquery_ui/i18n/jquery.ui.datepicker-vi.js", CClientScript::POS_END);
    $cs->registerScript("dateFieldSelect",'
        $("#Config_dateFieldValue").datepicker({
            dateFormat: "dd-mm-yy",
            //minDate:0,
            //maxDate:"+1m",
            buttonImage: baseUrl+"/css/admin/images/calendar.gif",
            showOn: "both",
            changeYear:true,
            changeMonth:true,
            showAnim: "slideDown"
        });

    ', CClientScript::POS_READY);
?>
<?php $form=$this->beginWidget('CActiveForm', array(
	'id'=>'config-form',
	'enableAjaxValidation'=>false,
)); ?>

	<p class="tip"><?php echo strtr(Yii::t('BackEnd', 'The fields {*} are required.'), array('{*}'=>'<span class="required">*</span>'))?></p>

	<?php //echo $form->errorSummary($model); ?>

    <table id="Config-basic-info" class="form-view">
            <tr class="odd">
                <th><?php echo $form->labelEx($model,'group_id'); ?></th>
                <td>
                    <?php
                        echo $form->dropDownList($model, 'group_id', ConfigGroup::dumpAllGroupToArray(Yii::t('BackEnd', '-- All --')));
                    ?>
                    <?php echo $form->error($model,'group_id'); ?>
                </td>
            </tr>
            <tr class="even">
                <th><?php echo $form->labelEx($model,'name'); ?></th>
                <td>
                    <?php echo $form->textField($model,'name',array('size'=>45,'maxlength'=>45)); ?>
                    <?php echo $form->error($model,'name'); ?>
                </td>
            </tr>
            <tr class="odd">
                <th><?php echo $form->labelEx($model,'html_tag'); ?></th>
                <td>
                    <?php
                         echo $form->dropDownList($model, 'html_tag', 
                                 Common::dumpAllHtmlTagToArray(),
                                 array('onChange'=>'changeValueForm(this.value)'));
                    ?>
                    <script type="text/javascript">
                        function changeValueForm(selectedValue)
                        {
                            var selectedForm = selectedValue+"Form";
                            if(selectedValue == 'radioList' || selectedValue == 'dropDownList')
                            {
                                selectedForm = 'listOptionForm';
                            }
                            var formArray = new Array('textFieldForm', 'dateFieldForm', 'textAreaForm', 'listOptionForm');
                            for(var i=0; i<formArray.length; i++){
                                if(selectedForm == formArray[i]){
                                    $('#'+formArray[i]).attr('class', 'show');
                                }else {
                                    $('#'+formArray[i]).attr('class', 'hide');
                                }
                            }
                        }
                    </script>
                    <?php echo $form->error($model,'html_tag'); ?>
                </td>
            </tr>
            <tr class="even">
                <th><?php echo $form->labelEx($model,'value'); ?></th>
                <td>
                    <div id="textFieldForm" class="show">
                        <?php echo $form->textField($model,'value',array('size'=>45,'maxlength'=>300)); ?>
                    </div>
                    <div id="dateFieldForm" class="hide">
                        <?php echo CHtml::textField('Config[dateFieldValue]',$model->value,array('size'=>45,'maxlength'=>300, 'readOnly'=>'readOnly')); ?>
                    </div>
                    <div id="textAreaForm" class="hide">
                        <?php echo CHtml::textArea('Config[textAreaValue]', $model->value, array('rows'=>6, 'cols'=>34)); ?>
                    </div>

                    <div id="listOptionForm" class="hide">
                        <div id="option-list">
                            <div id="value-option-1" class="item-value">
                                <span><?php echo Yii::t('BackEnd', 'Label');?> 1</span>
                                <input size="15" name="labels[]"/>
                                <span><?php echo Yii::t('BackEnd', 'Value');?> 1</span>
                                <input size="15" name="values[]"/>
                            </div>
                            <input type="hidden" value="1" id="valueNumber" name="valueNumber"/>
                        </div>
                        <script type="text/javascript">
                            var valueNumber = 1;
                            function addValue()
                            {
                                valueNumber++;
                                document.getElementById('valueNumber').value  = valueNumber;
                                
                                var valueHtml ="";
                                valueHtml += '<div id="value-option-'+valueNumber+'" class="item-value">';
                                valueHtml += '<span><?php echo Yii::t('BackEnd', 'Label');?>  '+valueNumber+' </span>';
                                valueHtml += '<input size="15" name="labels[]"/>';
                                valueHtml += '<span> <?php echo Yii::t('BackEnd', 'Value');?>  '+valueNumber+' </span>';
                                valueHtml += '<input size="15" name="values[]"/>';
                                valueHtml += '</div>';
                                $('#option-list').append(valueHtml);
                            }
                            function removeValue()
                            {
                                if(valueNumber > 1)
                                {
                                    $('#value-option-'+valueNumber).remove();
                                    valueNumber--;
                                    document.getElementById('valueNumber').value  = valueNumber;
                                }
                            }
                        </script>
                        <div id="mimiTool">
                            <img onclick="addValue();" title="<?php echo Yii::t('BackEnd', 'Add');?>" alt="<?php echo Yii::t('BackEnd', 'Add');?>" src="<?php echo Yii::app()->baseUrl?>/css/admin/images/icons/add_16x16.png" />
                            <?php echo Yii::t('BackEnd', '|');?>
                            <img onclick="removeValue();" title="<?php echo Yii::t('BackEnd', 'Remove');?>" alt="<?php echo Yii::t('BackEnd', 'Remove');?>" src="<?php echo Yii::app()->baseUrl?>/css/admin/images/icons/remove_16x16.png" />
                        </div>
                        <style type="text/css">
                            #mimiTool{margin: 10px 0px 5px 0px; width: 50%;}
                            #mimiTool img {cursor: pointer; padding: 0px 5px 0px 5px}
                            #option-list .item-value input{height:20px;background-color: #FFFFCC;}
                        </style>
                    </div>
                    <?php echo $form->error($model,'value'); ?>
                </td>
            </tr>
    </table>
    <input type="submit" style="display:none"/>
<?php $this->endWidget(); ?>

</div><!-- form -->